<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/WEB-INF/views/common/taglib.jsp"%>
<%@include file="/WEB-INF/views/common/js.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>${title}</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,300' rel='stylesheet' type='text/css'>

	<!-- Animate.css -->
	<link rel="stylesheet" href="${ctx}/css/mainpage/animate.css">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" href="${ctx}/css/mainpage/icomoon.css">
	<!-- Bootstrap  -->
	<link rel="stylesheet" href="${ctx}/css/mainpage/bootstrap.css">
	<!-- Superfish -->
	<link rel="stylesheet" href="${ctx}/css/mainpage/superfish.css">

	<link rel="stylesheet" href="${ctx}/css/mainpage/style.css">


	<!-- Modernizr JS -->
	<script src="${ctx}/js/mainpage/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="${ctx}/js/mainpage/respond.min.js"></script>
	<![endif]-->

	<script language="javascript">
		$(document).ready(function() {
			//加载系统模板
			$.ajax({
				url: '${ctx}/cosplay/getAllProfession',
				type: 'POST',
				data:{
				},
				dataType: 'json',
				success: function(responseText) {
					//添加职业的按钮
					for (var i = 0; i < responseText.TotalRecordCount; i++) {
						$("#joblist").append("<button class='btn btn-primary' data-toggle=\"modal\" data-target=\"#myModal\" onclick='openMapBox("+responseText.Records[i].profession_id+")'>"+responseText.Records[i].pro_name+"</button>&nbsp;");
					}
				}
			});
		});
	</script>

	<script language="javascript">
		function openMapBox(pro_id){
			$("#officedetail").empty();
			$("#officedetail").append("<iframe src='${ctx}/cosplay/preProfessionDetail?pro_id="+pro_id+"' id=\"myiframe\" scrolling=\"yes\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>");
		}
	</script>
</head>
<body>
<div id="fh5co-wrapper">
	<div id="fh5co-page">
		<div id="fh5co-header">
			<div class="top">
				<div class="container">
					<span> <a href="#"><i>@</i> 关注Santiago新浪微博</a></span>
					<span> <a href="tel://+4008517517"><i class="icon-mobile3"></i> 4008 517 517</a></span>
				</div>
			</div>
			<!-- end:top -->
			<header id="fh5co-header-section">
				<div class="container">
					<div class="nav-header">
						<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
						<h1 id="fh5co-logo"><a href="${ctx}/user/AfteruserLogin">圣地亚哥宠物医院</a></h1>
						<!-- START #fh5co-menu-wrap -->
						<nav id="fh5co-menu-wrap" role="navigation">
							<ul class="sf-menu" id="fh5co-primary-menu">
								<li>
									<a href="${ctx}/user/AfteruserLogin">Home</a>
								</li>
								<li>
									<a href="${ctx}/guide/pre3DGuide" class="fh5co-sub-down">3D导览</a>
									<ul class="fh5co-sub-menu">
										<li><a href="${ctx}/guide/pre3DGuide">3D模型导览</a></li>
										<li><a href="${ctx}/guide/preimageGuide">图片导览</a></li>
									</ul>
								</li>
								<li class="active">
									<a href="${ctx}/cosplay/preViewCosplay" class="fh5co-sub-down">职能学习</a>
									<ul class="fh5co-sub-menu">
										<li><a href="${ctx}/cosplay/preViewCosplay">角色扮演</a></li>
										<li><a href="${ctx}/office/preViewOffice">科室详情</a></li>
										<li><a href="${ctx}/case/preViewCase">病例学习</a></li>
									</ul>
								</li>
								<li><a href="${ctx}/user/userLogOut">退出</a></li>
							</ul>
						</nav>
					</div>
				</div>
			</header>

		</div>

		<div class="fh5co-hero">
			<div class="fh5co-overlay"></div>
			<div class="fh5co-cover text-center" style="background-image: url(${ctx}/images/mainpage/main.jpg);">
				<div class="desc animate-box">
					<h2>角色扮演模块</h2>
					<span id="joblist"></span>
				</div>
			</div>
		</div>
		<!-- end:header-top -->
		<footer>
			<div id="footer">
				<div class="container">
					<div class="row">
						<div class="col-md-6">
							<p>Copyright C1G19 Santiago Pet Hospital.All RIGHTS RESERVED. <br>Any Question Please contact 4008-517-517</p>
						</div>
						<div class="col-md-6">
							<ul class="footer-menu">
								<li><a href="${ctx}/user/AfteruserLogin">Home</a></li>
								<li><a href="${ctx}/guide/pre3DGuide">3D导览</a></li>
								<li><a href="${ctx}/cosplay/preViewCosplay">职能学习</a></li>
								<li><a href="${ctx}/user/userLogOut">退出</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</footer>
	</div>
	<!-- END fh5co-page -->
	<!-- Modal模态框，用以加载病例详细信息 -->
	<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">职业详情</h4>
				</div>
				<div class="modal-body" id="officedetail">
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>

</div>
<!-- END fh5co-wrapper -->

<!-- jQuery -->


<script src="${ctx}/js/mainpage/jquery.min.js"></script>

<!-- jQuery Easing -->
<script src="${ctx}/js/mainpage/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="${ctx}/js/mainpage/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="${ctx}/js/mainpage/jquery.waypoints.min.js"></script>
<!-- Superfish -->
<script src="${ctx}/js/mainpage/hoverIntent.js"></script>
<script src="${ctx}/js/mainpage/superfish.js"></script>

<!-- Main JS (Do not remove) -->
<script src="${ctx}/js/mainpage/main.js"></script>

</body>
</html>

